<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>登录</title>
	
	    <!-- Bootstrap -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<style type="text/css">
			
			/*分割线*/
			.line {
				background: #ccc;
				height: 0.0625em;
			}
			
			/*导航栏*/
			nav {
				height: 64px;
				color: white;
				background: red;
				text-align: center;
			}
			
			nav img {
				position: relative;
				height: 30px;
				width: 30px;
				float: left;
				margin-left: 15px;
				background: wheat;
				display: inline-block;
				bottom: -34px;
			}
			
			nav span {
				position: relative;
				margin: 0 auto;
				display: inline-block;
				bottom: -34px;
			}
			
			/*手机号输入框*/
			#middlebox .phonebox {
				width: 100%;
			}
			
			#middlebox .phonebox .phone {
				padding-top: 8px;
				padding-bottom: 8px;
				overflow: hidden;
				
			}
			
			#middlebox .phonebox .phone img {
				width: 30px;
				height: 30px;
				background: wheat;
				margin-left: 13px;
				margin-right: 5px;
				float: left;
			}
			
			.input_wrapper {
			  	overflow: hidden;
			}
			
			.input_wrapper input{
			  	border: none;
			  	width: 100%;
			  	height: 30px;
			  	outline: medium;
			}
			
			/*手机验证码*/
			#middlebox .ver_code .code {
				padding-top: 8px;
				padding-bottom: 8px;
				overflow: hidden;
			}
			
			#middlebox .ver_code .code img {
				width: 30px;
				height: 30px;
				background: wheat;
				margin-left: 13px;
				margin-right: 5px;
				float: left;
			}
			
			.code_wrapper {
				/*特别重要*/
			    position: relative;
			    display: -webkit-box;
			    display: -webkit-flex;
			    display: flex;
			    -webkit-box-align: center;
			    -webkit-align-items: center;
			    align-items: center;
			}
			
			.code_wrapper input[type=text] {
				border: none;
			  	width: 100%;
			  	height: 30px;
			  	outline: none;
			}
			
			.code_wrapper button {
				width: 90px;
				background: orange;
				margin-left: 5px;
				margin-right: 5px;
				text-align: center;
				line-height: 30px;
				border-radius: 3px;
				color: white;
				outline: none;
				border: none;
				font-size: 10px;
				float: right;
					
			}
			
			/*密码*/
			#middlebox .passwordbox .password {
				padding-top: 8px;
				padding-bottom: 8px;
				overflow: hidden;
			}
			
			#middlebox .passwordbox .password img {
				width: 30px;
				height: 30px;
				background: wheat;
				margin-left: 13px;
				margin-right: 5px;
				float: left;
			}
			
			/*服务条款*/
			#middlebox .agreement_box .agreement {
				padding-top: 8px;
				padding-bottom: 8px;
				overflow: hidden;
			}
			
			#middlebox .agreement_box .agreement img {
				width: 30px;
				height: 30px;
				background: wheat;
				margin-left: 13px;
				margin-right: 5px;
				float: left;
			}
			.agreement_wrapper {
				line-height: 30px;
			}
			
			.agreement_wrapper a {
				color: red;
			}
			
			/*提交按钮*/
			#middlebox input[type=submit] {
				margin-top: 15px;
				height: 50px;
				outline: none;
				width: 100%;
				color: white;
				background: red;
				border: none;
				border-radius: 5px;
			}
			
		</style>
	</head>
	
	<body>
		
		<div class="container">
			<nav>
				<img src=""/>
				<span>注册</span>
			</nav>
			
			<div id="middlebox">
				<form action="#" method="post">
					
					<!--手机号-->
					<div class="phonebox">
						<div class="phone">
							<img src=""/>
							  <div class="input_wrapper">
							    <input type="text" placeholder="请输入手机号"/>
							  </div>
						</div>
						<div class="line"></div>
					</div>
					
					<!--验证码-->
					<div class="ver_code">
						<div class="code">
							<img class"icon" src=""/>
							  <div class="code_wrapper">
							    <input class="ver_code_input" type="text" placeholder="请输入手机验证码"/>
							  	<button class="getting">获取验证码</button>
							  </div>
							  
						</div>
						<div class="line"></div>
					</div>
					
					<!--密码-->
					<div class="passwordbox">
						<div class="password">
							<img class"icon" src=""/>
							  <div class="input_wrapper">
							    <input type="password" placeholder="请输入密码"/>
							  </div>
						</div>
						<div class="line"></div>
					</div>
					
					<!--再次输入密码-->
					<div class="passwordbox">
						<div class="password">
							<img class"icon" src=""/>
							  <div class="input_wrapper">
							    <input type="password" placeholder="请确认密码"/>
							  </div>
						</div>
						<div class="line"></div>
					</div>
					
					<!--服务条款-->
					<div class="agreement_box">
						<div class="agreement">
						<img class"icon" src=""/>
							<div class="agreement_wrapper">
								<span>我已认真阅读并同意<a href="#">《服务条款》</a></span>
							</div>
						</div>
						<div class="line"></div>
					</div>
					
					<!--提交按钮-->
					<input type="submit" name="" id="" value="添加" />
					
				</form>
			</div>
		
		</div>
		
		    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    
    <script type="text/javascript">
    	
    	$(function() {
    		/*点击改变按钮状态，已经简略掉ajax发送短信验证的代码*/
         $('.getting').click(function(){
             var btn = $(this);
             var count = 60;
             var resend = setInterval(function(){
                 count--;
                 if (count > 0){
                     btn.val(count+"秒后可重新获取");
                 }else {
                     clearInterval(resend);
                     btn.val("获取验证码").removeAttr('disabled style');
                 }
             }, 1000);
             btn.attr('disabled',true).css('cursor','not-allowed');
         });
    	})
    </script>
	</body>
</html>
